<template>
  <div ref="diffContainerRef" class="diff-editor"></div>
</template>

<script setup name="YDiffEditor">
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as monaco from "monaco-editor";

const props = defineProps({
  originalText: String,
  modifiedText: String,
});

const diffContainerRef = ref(null);

let editor;

onMounted(() => {
  editor = monaco.editor.createDiffEditor(diffContainerRef.value, {
    // 配置选项
    theme: "vs",
    originalEditable: true,
    scrollBeyondLastLine: false,
    minimap: { enabled: false },
    automaticLayout: false,
  });

  const originalModel = monaco.editor.createModel(
    props.originalText,
    "text/plain"
  );
  const modifiedModel = monaco.editor.createModel(
    props.modifiedText,
    "text/plain"
  );

  editor.setModel({
    original: originalModel,
    modified: modifiedModel,
  });
});

onBeforeUnmount(() => {
  if (editor) {
    editor.dispose();
  }
});
</script>

<style scoped>
.diff-editor {
  width: 100%; /* 宽度占满父容器 */
  height: 800px;
  border: 1px solid grey;
  min-height: 600px; /* 最小高度 */
}
</style>
